<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- :immediate-check="false"表示开始进入不立即检查是否到底，但因为开始dataList是空的，异步请求才会有数据
      所以一开始就到底了，所以开始不请求或者压根异步请求前就不创建，即v-if方案，v-if更好，少创建销毁一次组件
      而不用开始就会创建一个空的组件，耗性能 -->
      <!-- 这里使用v-if="dataList.length"一样 -->
      <van-list
        v-if="dataList.length"
        class="list"
        v-model="loading"
        :finished="finished"
        finished-text="我也是有底线的~"
        @load="onLoad()"
        :immediate-check="false"
      >
        <li
          class="cell"
          v-for="data of dataList"
          @click="toDetail(data.filmId)"
          :key="data.filmId"
        >
          <div class="cell">
            <img :src="data.poster" />
            <div class="nowPlayingFilms-info">
              <span class="name">{{ data.name }} </span>
              <span class="item">{{ data.item.name }}</span>
              <div class="grade">
                <span class="grade-text">观众评分 </span>
                <span class="grade-info">{{ data.grade }}</span>
              </div>
              <div class="actors">
                <span class="actors-text">主演：</span>
                <span class="actors-info">{{ getactors(data.actors) }}</span>
              </div>
              <span class="label"
                >{{ data.nation }} | {{ data.runtime }}分钟</span
              >
              <!-- <span class="actors">{{ data.actors }}</span> -->
            </div>
            <button class="nowPlayingFilms-buy">购票</button>
            <span class="cross-line" />
          </div>
        </li>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// import axios from "axios";
import http from '@/util/http'
import { List, Cell, pullRefresh } from 'vant'
import Vue from 'vue'

Vue.use(List).use(Cell).use(pullRefresh)

export default {
  data () {
    return {
      dataList: [],
      total: 0,
      loading: false,
      finished: false,
      refreshing: false,
      current: 1
    }
  },
  methods: {
    toDetail (id) {
      // 直接用bom的location.href写式不太好的, 因为--有的时候vue-router路由路径的的模式不是hash可能不加#,
      // 那这样就匹配不上的，如果要改router的mode，那么href也得跟着改不好，而直接使用vue内部的router.push方法
      // 就不需要考虑这些
      // location.href = '#/detail'

      // 所以使用vue路由(vue-router)的对象提供的方法 push  他的路径是vue-router路由配置的路径,
      // 而不是解析之后的location.hash, 我们配置的路由到底层url路径的的解析加不加#它会判断, 所以这样更好
      // this.$router.push('/detail')   //----------
      // this.$router 中的this就是根组件, $router就是在main.js根组件载入时加入的router: router简写router
      // 注意cli默认创建的根组件不是App, 只不过用来render: h => h(App) 让App组件渲染到根组件里
      // 造成了App组件和跟组件一样的情况

      // 动态路由
      // this.$router.push(`/detail/${id}`)   //----------

      // 命名路由: 更贴合$route的规则, 里面有一个属性params这里就给$router.push传一个params,
      // 当然, 如果不是动态路由没有参数传递不加params,只写name就行了
      this.$router.push({
        // 只用path和使用name和param都可以
        // path: `/detail/${id}`,
        name: 'fqmyysjjd',
        params: {
          // id: id
          id
        }
      })
    },
    getactors (array) {
      if (array === undefined) return '暂无信息'
      return array.map((item) => item.name).join(' ')
    },
    getRandom () {
      return Math.floor(Math.random() * 100000)
    },
    firstLoad () {
      http({
        // 这个k是为了防止短时间内每次请求一样，浏览器未来优化性能会直接读本地缓存的网页，而不会再向后端发起一次请求
        // 为了获取实时最新的数据，就需要加上一个随机数，即k=...拼接在原请求后面，来取最新数据
        url: `/gateway?cityId=${
          this.$store.state.cityId
        }&pageNum=1&pageSize=10&type=1&k=${this.getRandom()}`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then((res) => {
        // console.log(res.data);
        this.dataList = res.data.data.films
        this.total = res.data.data.total
      })
    },
    async onLoad () {
      console.log(this.dataList.length)
      if (this.dataList.length < this.total) {
        this.current++
      } else {
        this.finished = true
        return
      }
      // 异步更新数据
      await http({
        // 这个k是为了防止短时间内每次请求一样，浏览器未来优化性能会直接读本地缓存的网页，而不会再向后端发起一次请求
        // 为了获取实时最新的数据，就需要加上一个随机数，即k=...拼接在原请求后面，来取最新数据
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${
          this.current
        }&pageSize=10&type=1&k=${this.getRandom()}`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then((res) => {
        console.log(res.data)

        // bug我不知道原因，我在这里直接如果请求时空，就说明请求完了，直接this.finished = true;不再加载了
        if (!res.data.data.films.length) this.finished = true

        // this.dataList.push(...res.data.data.films);
        this.dataList = [...this.dataList, ...res.data.data.films]
        // 加载状态结束

        // 跟上树没有关系，但是上树完后在会去loading慢一点加载，就会出bug概率小一点
        // 他会一次出现两次ajax请求，而不会在onload头打印console.log(this.dataList.length);两次，只会打印一次
        // 不知道什么原因----onload和refresh结合有bug
        // 但是单独的onload不会有bug
        this.loading = false
        // this.$nextTick(() => {
        //   this.loading = false;
        // });
        // 数据全部加载完成
      })
    },
    onRefresh () {
      console.log('刷新')
      this.firstLoad()
      this.loading = false
      this.finished = false
      this.current = 1
      this.refreshing = false
    }
  },
  mounted () {
    this.firstLoad()
  }
}
</script>

<style lang="scss" scoped>
.list {
  .cell {
    position: relative;
    display: flex;
    img {
      padding: 0.9375rem;
      width: 4.125rem;
    }
    .nowPlayingFilms-info {
      font-size: 0.8125rem;
      padding: 1.125rem 0;
      color: rgb(124, 124, 124);
      .name {
        font-size: 1rem;
        color: black;
      }
      .item {
        display: inline-block;
        color: white;
        font-size: 0.75rem;
        background-color: rgb(180, 180, 180);
        border-radius: 0.125rem;
        padding: 0 0.25rem;
      }
      .grade {
        margin: 0.25rem 0;
        .grade-info {
          font-size: 1rem;
          color: rgb(255, 94, 0);
        }
      }
      .actors {
        margin: 0.25rem 0;
        .actors-text {
          display: inline-block;
          overflow: hidden;
        }
        .actors-info {
          display: inline-block;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 9.375rem;
        }
      }
    }
    .nowPlayingFilms-buy {
      font-size: 0.875rem;
      color: rgb(255, 132, 60);
      width: 4.125rem;
      height: 2rem;
      align-self: center;
      text-align: center;
      background-color: white;
      border: 0.125rem solid rgba(255, 162, 108, 0.671);
      border-radius: 0.25rem;
    }
    .cross-line {
      position: absolute;
      bottom: 0;
      margin: 0 5%;
      width: 90%;
      border-bottom: 0.0063rem solid rgb(216, 216, 216);
    }
  }
}
</style>
